<template>
  <CommonBox title="无资产人员" width="490px">
    <div class="list-container">
      <div class="no-list" v-if="list.length == 0">
        <img src="@/assets/img/nouser.png" alt="" />
      </div>
      <div class="have-person" v-else>
        <div class="list-item" v-for="item in list">
          <div class="item-content">
            <div class="icon">
              <img src="@/assets/img/warning.png" alt="" />
            </div>
            <div class="name-content">{{ item.name }}</div>
          </div>
          <div class="btn-ck" @click="showPhone(item)">联系方式</div>
        </div>
      </div>
    </div>
  </CommonBox>
</template>

<script setup>
import { ref } from "vue";
import CommonBox from "../commonBox.vue";
import { ElMessageBox } from "element-plus";

const list = ref([]);
const departmentName = ref("");
departmentName.value = JSON.parse(
  window.localStorage.getItem("departmentInfo")
).name;
const noList = JSON.parse(window.localStorage.getItem("assetWarning"));
function getList() {
  list.value = [];
  noList.forEach((item) => {
    if (item.departmentname == departmentName.value) {
      list.value.push({ name: item.lastname, id: item.id, phone: item.mobile });
    }
  });
}
getList();
function showPhone(item) {
  ElMessageBox({
    title: "联系方式",
    message: `联系电话：${item.phone}`,
    confirmButtonText: "确定",
    type: "info",
    callback: () => {},
  });
}
</script>

<style scoped lang="less">
.list-container {
  width: 100%;
  height: 300px;
  .no-list {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 256px;
      height: 256px;
    }
  }
  .have-person {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .list-item {
      width: 100%;
      height: 50px;
      background: #f731315d;
      border-radius: 5px;
      display: flex;
      align-items: center;
      margin-top: 5px;
      justify-content: space-between;
      padding: 0 24px;
      .item-content {
        display: flex;
        align-items: center;
      }
      .icon {
        width: 20px;
        height: 28px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name-content {
        font-size: 18px;
        font-weight: 600;
        color: #000000;
        margin-left: 10px;
      }
      .btn-ck {
        font-size: 18px;
        font-weight: 600;
        color: #3b82f6;
        cursor: pointer;
        float: right;
      }
    }
  }
}
</style>
